<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
     <!--   <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 商品管理
        </el-breadcrumb-item> -->
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-button style="float: left;" type="primary" icon="el-icon-circle-plus-outline" @click="addGoods()">添加商品
      </el-button>

      <el-form :inline="true" :model="editForm" class="user-search" style="float: right;">
        <el-select v-model="editForm.state" placeholder="商品状态" class="handle-select mr10">
          <el-option key="13" label="上架中" value="13"></el-option>
          <el-option key="14" label="已下架" value="14"></el-option>
        </el-select>
        <el-select v-model="editForm.offer " placeholder="是否特价" class="handle-select mr10">
          <el-option key="15" label="特价" value="15"></el-option>
          <el-option key="16" label="非特价" value="16"></el-option>
        </el-select>
        <el-input v-model="editForm.low" placeholder="最低价格" class="handle-input mr10"></el-input>
        <el-input v-model="editForm.high" placeholder="最高价格" class="handle-input mr10"></el-input>
        <el-input v-model="editForm.goodsname" placeholder="商品名称" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索
        </el-button>
      </el-form>
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
        @selection-change="handleSelectionChange">
        <el-table-column header-align="center" align="center" type="index" label="序号" fixed="left"></el-table-column>
        <el-table-column prop="goodsId" label="ID" width="55" align="center"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称"></el-table-column>
        <el-table-column prop="typeName" label="商品类别"></el-table-column>
  <!--      <el-table-column prop="shopsId" label="分店id"></el-table-column> -->
        <el-table-column prop="goodsPrice" label="商品价格"></el-table-column>
        <el-table-column prop="num" label="商品数量"></el-table-column>
        <el-table-column prop="miao" label="是否秒杀">
          <template #default="scope">
                      <el-tag :type="
                              scope.row.miao === '秒杀商品'
                                  ? 'success'
                                  : scope.row.miao === '普通商品'
                                  ? 'danger'
                                  : ''
                          ">{{ scope.row.miao }}</el-tag>
                  </template>
        </el-table-column>
        <el-table-column prop="special" label="是否特价">
<template #default="scope">
            <el-tag :type="
                    scope.row.special === '特价'
                        ? 'success'
                        : scope.row.special === '非特价'
                        ? 'danger'
                        : ''
                ">{{ scope.row.special }}</el-tag>
        </template>
        </el-table-column>
        <el-table-column prop="activityPrice" label="商品活动价"></el-table-column>
        <el-table-column prop="goodsInfo" label="详细介绍(查看大图)" align="center">
          <template #default="scope">
            <el-image class="table-td-thumb" :src="ip+scope.row.goodsInfo" :preview-src-list="[ip+scope.row.goodsInfo]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="codeName" label="状态" align="center">
      <template #default="scope">
            <el-tag :type="
                    scope.row.codeName === '上架中'
                        ? 'success'
                        : scope.row.codeName === '已下架'
                        ? 'danger'
                        : ''
                ">{{ scope.row.codeName }}</el-tag>
        </template>
        </el-table-column>
        <el-table-column label="操作" width="230" align="center">
          <template #default="scope">
            <el-button type="text" icon="el-icon-caret-top" @click="see(scope.$index, scope.row)">查看
            </el-button>
            <!-- 上架按钮 -->
            <el-button v-if="scope.row.state==14" type="text" icon="el-icon-caret-top" @click="upper(scope.$index, scope.row)">上架
            </el-button>
            <!-- 下架按钮 -->
            <el-button v-if="scope.row.state==13" type="text" icon="el-icon-caret-bottom" class="orange" @click="lower(scope.$index, scope.row)">下架
            </el-button>
            <el-button type="text" icon="el-icon-edit" class="green" @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  <div class="pagination">
    <el-pagination background layout="total, prev, pager, next" :current-page="this.pageIndex"
      :page-size="this.pageSize" :total="pageTotal" @size-chage="handleSizeChange" @current-change="handlePageChange"></el-pagination>
  </div>
    </div>

    <!-- 编辑弹出框 -->
   <el-dialog title="编辑" :visible.sync="editVisible" width="30%">

      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="商品ID">
          <el-input v-model="form.goodsId" disabled="false"></el-input>
        </el-form-item>
        <el-form-item label="商品名">
          <el-input v-model="form.goodsName"></el-input>
        </el-form-item>

      <el-form-item label="商品类型">
         <el-select v-model="form.category" placeholder="商品类型" class="handle-select mr10">
          <el-option selected label="请选择" value="0"></el-option>
          <el-option v-for="category in categoryaggregate" :key="category.categoryId" :label="category.typeName" :value="category.categoryId">

          </el-option>
          </el-select>
      </el-form-item>
 <!-- <el-form-item label="商品描述">
    <el-input v-model="form.describe"></el-input>
  </el-form-item> -->

        <el-form-item label="商品价格">
          <el-input v-model="form.goodsPrice"></el-input>
        </el-form-item>
        <el-form-item label="活动价格">
          <el-input v-model="form.activityPrice"></el-input>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="form.num"></el-input>
        </el-form-item>
        <el-form-item label="是否特价">
          <el-select v-model="form.offer" placeholder="请选择是否特价">
            <el-option select label="是" value="15"></el-option>
            <el-option label="否" value="16"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否秒杀">
          <el-select v-model="form.isKill" placeholder="请选择是否秒杀">
            <el-option select label="是" value="31"></el-option>
            <el-option label="否" value="30"></el-option>
          </el-select>
        </el-form-item>
     <el-form-item label="详情图上传">
               <el-upload
                 v-model="form.goodsInfo"
                 class="upload-demo"
                 action="http://43.142.173.112:9090/adminGoods/uploadImage"
                 :on-success="onSuccess"
                 :on-preview="handlePreview"
                 :on-remove="handleRemove"
                 list-type="picture">
                 <el-button size="small" type="primary">点击上传详情图</el-button>
               </el-upload>
             </el-form-item>
             <el-form-item label="详情图">
                   	<el-image class="table-td-thumb" :src="ip+form.goodsInfo" :preview-src-list="[ip+form.goodsInfo]">
                   	          </el-image>
                   </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加界面弹出框 -->

   	<el-dialog title="新增商品" :visible.sync="addVisible" width="30%">
    	<el-form :model="addForm" label-width="70px">
        <el-form-item label="商品名">
          <el-input v-model="addForm.goodsName"></el-input>
        </el-form-item>
     <el-form-item label="商品类型">
        <el-select v-model="addForm.category" placeholder="商品类型" class="handle-select mr10">
         <el-option selected label="请选择" value="0"></el-option>
         <el-option v-for="category in categoryaggregate" :key="category.categoryId" :label="category.typeName" :value="category.categoryId">

         </el-option>
         </el-select>
     </el-form-item>
       <el-form-item label="商品描述">
          <el-input v-model="addForm.describe"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="addForm.goodsPrice"></el-input>
        </el-form-item>
        <el-form-item label="活动价格">
          <el-input v-model="addForm.activityPrice"></el-input>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="addForm.num"></el-input>
        </el-form-item>
        <el-form-item label="是否特价">
          <el-select v-model="addForm.offer" placeholder="请选择是否特价">

            <el-option select label="是" value="15"></el-option>
            <el-option label="否" value="16"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否秒杀">
          <el-select v-model="addForm.isKill" placeholder="请选择是否秒杀">
            <el-option select label="是" value="31"></el-option>
            <el-option label="否" value="30"></el-option>
          </el-select>
        </el-form-item>
     <el-form-item label="详情图">
               <el-upload
                 v-model="addForm.goodsInfo"
                 class="upload-demo"
                 action="http://43.142.173.112:9090/adminGoods/uploadImage"
                 :on-success="onSuccess"
                 :on-preview="handlePreview"
                 :on-remove="handleRemove"
                 list-type="picture">
                 <el-button size="small" type="primary">点击上传详情图</el-button>
               </el-upload>
             </el-form-item>
             <el-form-item label="主图1">
                       <el-upload
                         v-model="addForm.img1"
                         class="upload-demo"
                         action="http://43.142.173.112:9090/adminGoods/uploadImage"
                         :on-success="onSuccess"
                         :on-preview="handlePreview"
                         :on-remove="handleRemove"
                         list-type="picture">
                         <el-button size="small" type="primary">点击上传主图1</el-button>
                       </el-upload>
                     </el-form-item>
                     <el-form-item label="主图2">
                               <el-upload
                                 v-model="addForm.img2"
                                 class="upload-demo"
                                 action="http://43.142.173.112:9090/adminGoods/uploadImage"
                                 :on-success="onSuccess"
                                 :on-preview="handlePreview"
                                 :on-remove="handleRemove"
                                 list-type="picture">
                                 <el-button size="small" type="primary">点击上传主图2</el-button>
                               </el-upload>
                             </el-form-item>
                             <el-form-item label="主图3">
                                       <el-upload
                                         v-model="addForm.img3"
                                         class="upload-demo"
                                         action="http://43.142.173.112:9090/adminGoods/uploadImage"
                                         :on-success="onSuccess"
                                         :on-preview="handlePreview"
                                         :on-remove="handleRemove"
                                         list-type="picture">
                                         <el-button size="small" type="primary">点击上传主图3</el-button>
                                       </el-upload>
                                     </el-form-item>
                                     <el-form-item label="主图4">
                                               <el-upload
                                                 v-model="addForm.img4"
                                                 class="upload-demo"
                                                 action="http://43.142.173.112:9090/adminGoods/uploadImage"
                                                 :on-success="onSuccess"
                                                 :on-preview="handlePreview"
                                                 :on-remove="handleRemove"
                                                 list-type="picture">
                                                 <el-button size="small" type="primary">点击上传主图4</el-button>
                                               </el-upload>
                                             </el-form-item>
                                             <el-form-item label="主图5">
                                                       <el-upload
                                                         v-model="addForm.img5"
                                                         class="upload-demo"
                                                         action="http://43.142.173.112:9090/adminGoods/uploadImage"
                                                         :on-success="onSuccess"
                                                         :on-preview="handlePreview"
                                                         :on-remove="handleRemove"
                                                         list-type="picture">
                                                         <el-button size="small" type="primary">点击上传主图5</el-button>
                                                       </el-upload>
                                                     </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAdd()">确 定</el-button>
      </span>
    </el-dialog>

		<el-dialog title="主图详情" :visible.sync="seeVisible" width="40%" >
		<el-table :data="seeTableData" border class="table" ref="multipleTable">
			<el-table-column prop="images" label="商品主图">
			  <template #default="scope">
			              <el-image class="table-td-thumb" :src="ip+scope.row.images" :preview-src-list="[ip+scope.row.images]">
			              </el-image>
			            </template>
			</el-table-column>

		</el-table>
		</el-dialog>

  </div>
</template>

<script>
  export default {

    data() {
      return {
        // 图片
        fileList: [{
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }],
        editForm: {
           state: "",
           offer: "",
           low: "",
           high: "",
         goodsname: ""
        },
        // // 分类集合
        categoryaggregate: [],

        // dialogImageUrl: '',
        // dialogVisible: false,
        pageIndex: 1,
        pageSize: 5,
        ip:'http://43.142.173.112:16622/images/',
        tableData: [],
        seeTableData: [],
        multipleSelection: [],
        delList: [],
        editVisible: false,
        addVisible: false,
        seeVisible: false,
        pageTotal: 1,
        form: {
        goodsId: "",
        goodsName: "",
        category: "",
        describe: "",
        goodsPrice: "",
        activityPrice: "",
        num: "",
        offer: "",
        isKill: "",
     goodsInfo: ""
        },
        addForm:{
         goodsName: "",
         category: "",
         describe: "",
         goodsPrice: "",
         activityPrice: "",
         num: "",
         offer: "",
         isKill: "",
         goodsInfo: "",
         img1: "",
         img2: "",
         img3: "",
         img4: "",
         img5: ""
					},
           categoryaggregate: [],

        idx: -1,
        id: -1
      };
    },
    created() {

    this.handleSearch();
     getRoleId(this)
    },
    methods: {

      // 图片
      handleRemove(file, fileList) {
        // console.log(file, fileList);
      },
      handlePreview(file) {
        // console.log(file);
      },
      onSuccess(response) {
        this.$data.addForm.goodsInfo = response.fileUrl,
         this.$data.form.goodsInfo = response.fileUrl,
        this.$data.addForm.img1 = response.fileUrl,
        this.$data.addForm.img2 = response.fileUrl,
        this.$data.addForm.img3 = response.fileUrl,
        this.$data.addForm.img4 = response.fileUrl,
        this.$data.addForm.img5 = response.fileUrl
      },

      onSubmit() {
        console.log(this.fileList)
      },

      handleRemove(file, fileList) {
        console.log(file, fileList);
      },


      // 获取 easy-mock 的模拟数据
      getData() {

      },
      // 触发搜索按钮
      handleSearch() {
 let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
	this.$axios.post('/adminGoods/allGoods', this.$qs.stringify({
          shopsId: userInfo.shopsId,
				  pagenum: this.$data.pageIndex,
				  pagesize: this.$data.pageSize,
				  state: this.editForm.state>0 ?this.editForm.state:0,
          offer: this.editForm.offer>0 ?this.editForm.offer:0,
				  low: this.editForm.low>0 ?this.editForm.low:0,
				  high: this.editForm.high>0 ?this.editForm.high:0,
				  goodsName: this.editForm.goodsname,
				  headers: {
				    'Content-Type': 'application/json;charset=UTF-8'
				  },
				})).then(response => {

				  // eslint-disable-next-line eqeqeq
				  if (response.data != null) {


				    // 接收后台发来的map集合table是表数据，total是总数
				    this.tableData = response.data.table
				    this.pageTotal = response.data.total
console.log("haha",this.tableData)
				  }
				}).catch(err => {
				  alert(err)
				})
      },
      // 删除操作
      handleDelete(index, row) {
        this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }).then(() => {
          this.$axios.post('/adminGoods/delGoods', this.$qs.stringify({
            goodsId: row.goodsId
          })).then(response => {
          				  console.log(response)
          				  if (response.data != null) {
          				      		console.log('数据接收');
          				      console.log(response.data)
          				    if(response.data=='1'){
          				      this.$message({
          				        type: 'success',
          				        message: '删除成功!'
          				      });
        this.handleSearch();
          				    }else{
          				      this.$message({
          				        type: 'fail',
          				        message: '删除失败!'
          				      });
          				    }
          				    }
          				  })
          				    }).catch(() => {
          				      this.$message({
          				        type: 'info',
          				        message: '已取消删除'
          				      });
          				    });
      },
      //查看详情图
      see(index, row){
  this.$axios.post('/adminGoods/see', this.$qs.stringify({
            goodsId: row.goodsId

         })).then(response => {
           console.log(response)
           // eslint-disable-next-line eqeqeq
           if (response.data != null) {

      this.$data.seeVisible= true;
             // 接收后台发来的map集合table是表数据，total是总数
             this.seeTableData = response.data.table

           }
         }).catch(err => {
           alert(err)
         })
      },

      // 添加操作
      addGoods() {
        this.addVisible = true;
      },

      // 多选操作
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      // 编辑操作
      handleEdit(index, row) {
        console.log(index, row);
        this.$data.editVisible = true;

        this.$data.form.goodsId = row.goodsId;
        this.$data.form.goodsName = row.goodsName;
        this.$data.form.categoryId = row.categoryId;
        this.$data.form.shopsId = row.shopsId;
        this.$data.form.goodsPrice = row.goodsPrice;
        this.$data.form.activityPrice = row.activityPrice;
        this.$data.form.num = row.num;

        // this.$data.form.isKill = row.isKill;
        this.$data.form.goodsInfo= row.goodsInfo;

      },
      // 保存编辑
      saveEdit() {

           this.$axios.post('/adminGoods/upGoods', this.$qs.stringify({
                        goodsId: this.form.goodsId,
                        goodsName: this.form.goodsName,
                        categoryId: this.form.category,
                        goodsPrice: this.form.goodsPrice,
                        activityPrice:this.form.activityPrice,
                        num:this.form.num,
                        offer:this.form.offer,
                        isKill:this.form.isKill,
                        goodsInfo:this.form.goodsInfo,

                        })).then(response => {
              				  console.log(response)
              				  if (response.data != null) {
              				    		console.log('数据接收');
              				    console.log(response.data)
              				  if(response.data=='1'){
              				    this.$message({
              				      type: 'success',
              				      message: '商品修改成功!',

              				    });
             this.$data.editVisible = false;
              window.location.reload() // 强制刷新
               this.handleSearch();
              				  }else{
              				    this.$message({
              				      type: 'fail',
              				      message: '商品修改失败!'
              				    });
              				  }
              				  }
              				})
      },
      // 保存添加
      saveAdd() {
let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
     this.$axios.post('/adminGoods/addGoods', this.$qs.stringify({
                  shopsId: userInfo.shopsId,
                  goodsName: this.addForm.goodsName,
                  categoryId: this.addForm.category,
                  goodsPrice: this.addForm.goodsPrice,
                  activityPrice:this.addForm.activityPrice,
                  num:this.addForm.num,
                  offer:this.addForm.offer,
                  isKill:this.addForm.isKill,
                  goodsInfo:this.addForm.goodsInfo,
                  describe:this.addForm.describe,

                  img1:this.addForm.img1,
                  img2:this.addForm.img2,
                  img3:this.addForm.img3,
                  img4:this.addForm.img4,
                  img5:this.addForm.img5
                  })).then(response => {
        				  console.log(response)
        				  if (response.data != null) {
        				    		console.log('数据接收');
        				    console.log(response.data)
        				  if(response.data=='1'){
        				    this.$message({
        				      type: 'success',
        				      message: '商品添加成功!',

        				    });
       this.$data.addVisible = false;
        window.location.reload() // 强制刷新
         this.handleSearch();
        				  }else{
        				    this.$message({
        				      type: 'fail',
        				      message: '商品添加失败!'
        				    });
        				  }
        				  }
        				})
      },

   //       // 分页导航
         handlePageChange(val) {
           this.pageIndex=val
           this.handleSearch();

         },
         //条数
         handleSizeChange(val){
           this.pageSize=val
           this.handleSearch();
         },
      // 上架按钮
      upper(index, row) {
      this.$confirm('此操作将上架该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
        this.$axios.post('/adminGoods/upper', this.$qs.stringify({
          goodsId: row.goodsId
        })).then(response => {
        				  console.log(response)
        				  if (response.data != null) {
        				      		console.log('数据接收');
        				      console.log(response.data)
        				    if(response.data=='1'){
        				      this.$message({
        				        type: 'success',
        				        message: '上架成功!'
        				      });
      this.handleSearch();
        				    }else{
        				      this.$message({
        				        type: 'fail',
        				        message: '上架失败!'
        				      });
        				    }
        				    }
        				  })
        				    }).catch(() => {
        				      this.$message({
        				        type: 'info',
        				        message: '已取消上架'
        				      });
        				    });
      },
      // 下架按钮
      lower(index, row) {
       this.$confirm('此操作将下架该商品, 是否继续?', '提示', {
                     confirmButtonText: '确定',
                     cancelButtonText: '取消',
                     type: 'warning'
                   }).then(() => {
         this.$axios.post('/adminGoods/lower', this.$qs.stringify({
           goodsId: row.goodsId
         })).then(response => {
         				  console.log(response)
         				  if (response.data != null) {
         				      		console.log('数据接收');
         				      console.log(response.data)
         				    if(response.data=='1'){
         				      this.$message({
         				        type: 'success',
         				        message: '下架成功!'
         				      });
       this.handleSearch();
         				    }else{
         				      this.$message({
         				        type: 'fail',
         				        message: '下架失败!'
         				      });
         				    }
         				    }
         				  })
         				    }).catch(() => {
         				      this.$message({
         				        type: 'info',
         				        message: '已取消下架'
         				      });
         				    });
      },
    }
  }
  // 动态绑定类别下拉框
  async function getRoleId ($this) {

   $this.$axios({
     url: '/adminGoods/genre',
     method: 'get',
     // params: {
     //   parentid: 1
     // }
   }).then(res => {
     console.log('数据', res.data)
     $this.categoryaggregate = res.data
     console.log('下拉', $this.categoryaggregate)
   })

  }

</script>

<style scoped>
  .handle-box {
    margin-bottom: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .table {
    width: 100%;
    font-size: 14px;
  }

  .green {
    color: springgreen;
  }

  .red {
    color: #ff0000;
  }

  .orange {
    color: orange;
  }

  .mr10 {
    margin-right: 10px;
  }

  .table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
  }
</style>
